<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Uppy</title>
    <link href="https://releases.transloadit.com/uppy/v2.2.1/uppy.min.css" rel="stylesheet">
</head>
<body>
<div id="drag-drop-area"></div>

<script src="https://releases.transloadit.com/uppy/v2.2.1/uppy.min.js"></script>
<script>
    var uppy = new Uppy.Core()
        .use(Uppy.Dashboard, {
            inline: true,
            target: '#drag-drop-area',
        })
        .use(Uppy.XHRUpload, {
            id: 'XHRUpload',
            endpoint: '/file/upload',
            method: 'post',
            formData: true,
            fieldName: 'file',
            bundle: true,
            timeout: 30 * 1000, // default 30s
            limit: 0, // Limit the amount of uploads going on at the same time.
        });

    uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
    })
</script>
</body>
</html>